﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学生首页</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        li.item {
            display: inline-block;
            color: #ff9966;
            font-size: 20px;
            margin-right: 3px;
        }
        .bookImg {
            height: 250px;
            width: 80%;
            margin-left: 10%;
        }

    </style>
</head>
<body class="layui-layout-body">

    <div class="layui-body" style="position:absolute;left:0px;bottom:0;">

        <div class="layui-carousel" id="test1" style="margin-top: 5px;margin-left:10%;">
            <div carousel-item>
                <div><img src="/img/2.jpg" style="width: 100%;height: 400px;"></div>
                <div><img src="/img/3.jpg" style="width: 100%;height: 400px;"></div>
                <div><img src="/img/4.jpg" style="width: 100%;height: 400px;"></div>
                <div><img src="/img/5.jpg" style="width: 100%;height: 400px;"></div>
                <div><img src="/img/1.jpg" style="width: 100%;height: 400px;"></div>
            </div>
        </div>
        <!---->
        <div class="layui-container">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>今日公开课</legend>
            </fieldset>
            <div class="layui-row layui-col-space30">
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/gaodengshuxue.PNG" class="bookImg" value="高数" /><h2 style="text-align:center">高数</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/xianxingdaishu.PNG" class="bookImg" value="线性代数" /><h2 style="text-align:center">线性代数</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/caozuoxitong.PNG" class="bookImg" value="操作系统" /><h2 style="text-align:center">操作系统</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/yingyu.PNG" class="bookImg" value="英语" /><h2 style="text-align:center">英语</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/shujuku.PNG" class="bookImg" value="数据库" /><h2 style="text-align:center">数据库</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/jisuanjiwangluo.PNG" class="bookImg" value="计算机网络" /><h2 style="text-align:center">计算机网络</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/shujujiegou.PNG" class="bookImg" value="数据结构" /><h2 style="text-align:center">数据结构</h2></div>
                </div>
                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 ">
                    <div style="height: 270px;"><img src="/img/books/jisuanjijichu.PNG" class="bookImg" value="计算机基础" /><h2 style="text-align:center">计算机基础</h2></div>
                </div>
            </div>
            <a id="turnToMore" style="position:absolute;right:20px;margin-top: 4px;" href="javasript:;" >查看更多>>></a>
        </div>
      
         
        <div class="layui-container">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>今日活动</legend>
            </fieldset>
            <div class="layui-row layui-col-space10">
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 ">
                    <div style="height: 200px;"><img src="/img/活动1.jpg" style="height: 200px;width:100%;" /></div>
                </div>
                <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 ">
                    <div style="height: 200px;">
                        <h1>活动名称</h1>
                        <p>活动内容:</p>
                    </div>
                </div>
                <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 ">
                    <div style="height: 200px;"><img src="/img/活动2.jpg" style="height: 200px;width:100%;" /></div>
                </div>
                <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 ">
                    <div style="height: 200px;">
                        <h1>活动名称</h1>
                        <p>活动内容:</p>
                    </div>
                </div>
            </div>
        </div>
        <a style="float: right;margin-top: 4px;">查看更多>>></a>
  
    </div>
        <script src="/layui/layui.js"></script>
        <script>
            //JavaScript代码区域
            layui.use(['element', 'form','carousel'], function () {
                var element = layui.element;
                var form = layui.form;
                var carousel = layui.carousel;
                var $ = layui.$;
                carousel.render({
                    elem: '#test1',
                    width: '80%', //设置容器宽度
                    height: 400,
                    arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
                // 监听提交
                form.on('submit(submit)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
                $("#turnToMore").on('click', function () {
                    var exist = parent.$("li[lay-id=" + 22 + "]").length; //判断是否存在tab
                    //  	var exist=$("li[lay-id='"+11+"']").length; //判断是否存在tab
                    if (exist == 0) {
                        parent.element.tabAdd('demo', {
                            title: "学校课程",
                            content: "<iframe src='/course2.aspx'></iframe>", //支持传入html
                            id: 22,
                        });
                    }
                    parent.element.tabChange('demo', '22');//切换tab
                    parent.turnToTop();
                });
                $(".bookImg").on('click', function () {
                    var text=$(this).attr("value");
                    parent.layer.open({
                        type: 2
                        , content: ['bookInfo2.aspx?title=' + text, 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        , area: '300px;'
                        , offset: '50px'
                        , area: ['700px', '90%']
                    }); 
                });
            });
        </script>
      
</body>
</html>